<template>
    <view class="byt-activity">
        <view class="byt-activity__tabpane-item" v-for="(sitem, sindex) in items" :key="sindex"
            @click="activityClick(sitem)">
            <view class="byt-activity__tabpane-item__left">
                <basic-image :src="sitem[labelObj[0]]" width="164rpx" height="124rpx" radius="8rpx"></basic-image>
            </view>
            <view class="byt-activity__tabpane-item__right">
                <view>
                    <view class="byt-activity__tabpane-item__right__name">{{ sitem[labelObj[1]] }}</view>
                    <view class="byt-activity__tabpane-item__right__date">
                        <basic-icon size="12px"
                            name="https://img.yummall.cn/baiyetong/byt-uni-ui/activeTimeIcon.svg"></basic-icon>
                        <view class="byt-activity__tabpane-item__right__date__text">{{ sitem[labelObj[2]] }}</view>
                    </view>

                    <view class="byt-activity__tabpane-item__right__address">
                        <basic-icon size="14px"
                            name="https://img.yummall.cn/baiyetong/byt-uni-ui/activeAddressIcon.svg"></basic-icon>
                        <view class="byt-activity__tabpane-item__right__date__text">{{ sitem[labelObj[3]] }}</view>
                    </view>
                </view>
                <view class="byt-activity__tabpane-item__right__btn">参与</view>

            </view>
        </view>
    </view>
</template>

<script>
// import { BasicImage } from '../../basic';
// 图片
import BasicImage from '../../basic/basic-image/basic-image.vue';
// 图标
import BasicIcon from '../../basic/basic-icon/basic-icon.vue';
import { isEmpty } from '../../../utils/index.js';
export default {
    name: 'activity',
    components: { BasicImage, BasicIcon },
    emits: ['click'],
    props: {
        // 优惠券列表
        items: {
            type: Array,
            default: () => [
                {
                    id: 1,
                    url: 'https://img1.baidu.com/it/u=486868600,4169209462&fm=253&app=138&f=JPEG?w=800&h=1732',
                    name: '这里是活动名称，这里是活动名称',
                    address: '南昌市东方米兰服饰商务广场',
                    date: '2023/05/06-2023/06/06'
                },
                {
                    id: 2,
                    url: 'https://img.shetu66.com/2022/08/cutCoverImg/1663065743290621.jpg?x-oss-process=image/resize,h_900/format,webp',
                    name: '这里是活动名称，这里是活动名称',
                    address: '南昌市东方米兰服饰商务广场',
                    date: '2023/05/06-2023/06/06'
                },
                {
                    id: 3,
                    url: 'https://img1.baidu.com/it/u=486868600,4169209462&fm=253&app=138&f=JPEG?w=800&h=1732',
                    name: '这里是活动名称，这里是活动名称',
                    address: '南昌市东方米兰服饰商务广场',
                    date: '2023/05/06-2023/06/06'
                }
            ]
        },
        // 数据键值
        labelObj: {
            type: Array,
            default: () => ['url', 'name', 'date', 'address']
        }
    },
    data() {
        return {};
    },
    methods: {
        isEmpty,
        activityClick(row) {
            this.$emit('click', row);
        }
    }
};
</script>

<style lang="scss" scoped>
@include b(activity) {
    display: flex;
    flex-direction: column;
    gap: 32rpx;

    @include e(title) {
        display: flex;
        align-items: center;
        padding: 20rpx 32rpx;

        @include eb(icon) {
            margin: 0 4px;
            font-size: 32rpx;
            color: #303133;
        }
    }

    @include e(tabpane-item) {
        // width: 575rpx;
        // box-sizing: border-box;
        display: flex;
        align-items: center;
        background: white;
        // padding: 32rpx 0;
        padding-bottom: 32rpx;
        // margin-bottom: 28rpx;
        border-radius: 8rpx;
        border-bottom: 0.5px solid #F0F0F0;

        @include e(left) {
            width: 164rpx;
            height: 124rpx;

            .byt-image {
                border-radius: 8rpx;
            }
        }

        @include e(right) {
            height: 124rpx;
            padding-left: 24rpx;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;

            @include e(name) {
                width: 240rpx;
                color: #010103;
                font-size: 28rpx;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            @include e(date) {
                width: 270rpx;
                margin-top: 16rpx;
                font-size: 20rpx;
                color: #999999;
                display: flex;
                align-items: center;
                gap: 3rpx;

                basic-icon {
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                }

                @include e(text) {
                    width: 200rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    flex: 1;
                    line-height: 1;
                }
            }

            @include e(address) {
                width: 270rpx;
                margin-top: 8rpx;
                font-size: 20rpx;
                color: #999999;
                display: flex;
                align-items: center;
                gap: 3rpx;

                basic-icon {
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                }

                @include e(text) {
                    width: 200rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    flex: 1;
                    line-height: 1;
                }
            }


            @include e(btn) {
                min-width: 104rpx;
                height: 48rpx;
                background: #494848;
                border-radius: 24rpx;
                font-size: 24rpx;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        &:last-child {
            border-bottom: none;
            padding-bottom: 28rpx;
        }
    }
}
</style>
